<script setup>
import { ref } from "vue";
import { bankAdd, selectbankList } from "@/services/reward";
// 获取组件实例
const formRef = ref(null);
// 表单数据
const formData = ref({
  number: null,
  name: "",
  deposit: "",
});

// 验证表单数据的规则
const formRules = {
  number: {
    rules: [
      {
        required: true,
        errorMessage: "请填写银行卡号",
      },
      {
        pattern: "^[0-9]{16,19}$",
        errorMessage: "银行卡号格式不正确",
      },
    ],
  },
  name: {
    rules: [
      {
        required: true,
        errorMessage: "请输入银行名称",
      },
    ],
  },
  deposit: {
    rules: [
      {
        required: true,
        errorMessage: "请输入开户行",
      },
    ],
  },
};
selectbankListfun();
async function selectbankListfun() {
  let res = await selectbankList({
    type: 1,
  });
  array.value = res.data;
}

// 保存
async function keep() {
  // const result = await formRef.value.validate();
  formRef.value
    .validate()
    .then(async (res) => {
      let resdata = await bankAdd({
        bank_number: formData.value.number,
        bank_name: formData.value.name,
        bank_open: formData.value.deposit,
        is_default: 1,
      });
      if (resdata.code === 200) {
        uni.showToast({
          title: "添加成功",
          icon: "none",
          mask: true,
        });

        let pages = getCurrentPages();

        // 获取页面栈的长度，即页面跳转层级
        let level = pages.length;
        if (level > 1) {
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          setTimeout(() => {
            uni.switchTab({
              url: "/pages/my/index",
            });
          }, 1500);
        }
      }
    })
    .catch((err) => {});
}
const index = ref(-1);
const array = ref([]);

const bindPickerChange = (e) => {
  index.value = e.detail.value;
  formData.value.name = array.value[index.value].bank_name;
};
</script>
<template>
  <view class="addBankCard">
    <view class="top-title">仅支持添加储蓄卡</view>
    <view class="addBankCard-card">
      <uni-forms
        label-width="145rpx"
        ref="formRef"
        :rules="formRules"
        :model="formData"
      >
        <uni-forms-item name="number" label="银行卡号">
          <uni-easyinput
            type="number"
            v-model="formData.number"
            placeholder="请输入银行卡号"
          />
        </uni-forms-item>
        <!-- <uni-forms-item name="name" label="银行名称">
					<uni-easyinput type="text" v-model="formData.name" placeholder="如：中国银行" />
				</uni-forms-item> -->

        <uni-forms-item name="name" label="银行名称">
          <!-- <uni-easyinput type="text" v-model="formData.name" placeholder="如：中国银行" /> -->
          <picker
            @change="bindPickerChange"
            :value="index"
            :range="array"
            range-key="bank_name"
          >
            <view class="uni-input select-uni-input" v-if="index >= 0"
              >{{ array[index].bank_name }}
            </view>
            <view class="uni-input" v-if="index < 0"> 请选择 </view>
          </picker>
        </uni-forms-item>

        <uni-forms-item name="deposit" label="开户支行">
          <uni-easyinput
            type="text"
            v-model="formData.deposit"
            placeholder="如：中国银行四川成都双流支行"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="bottom-btn">
      <button class="btn" @click="keep">保存</button>
    </view>
  </view>
</template>

<style lang="scss">
@import "addBankCard.scss";
</style>
